parcel js/css/图片/文件等资源打包构建总结

2023-10-04 19:00| 来源: 网络整理| 查看: 265

Parcel js/css/图片/文件等资源打包构建总结

本章节呢，大喵将带着大家，使用parcel分别对JS还有其他资源进行打包测试，让大家了解parcel是如何方便快捷开箱即用打包构建的 ~

1. Javascript parcel 打包

javascript打包是前端开发中最常用的打包，本章节内容呢，将使用parcel来打包 CommonJS 和 ES6 、import() 的JS模块

我们首先使用CommonJS的方式进行引入 // 使用 CommonJS 语法导入模块 const lod = require('lodash') console.log(lod.VERSION) 接着我们使用ES6的方式引入： import lod2 from 'lodash' console.log(lod2.VERSION) 最后我们使用import动态导入的方式引入： import('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js').then(() => { console.log(_.VERSION) }) 我们在控制台打印一下 npx parcel index.html Server running at http://localhost:1234 √ Built in 4.74s. 我们去到浏览器控制台，观察打印结果如下： 4.17.15 4.17.15 4.17.11 说明使用parcel模块化打包我们JS的这几种规范都是没有什么问题的 2. 其他Web资源 parcel打包

接着，我们使用parcel来打包我们在项目中引入的的css, 图片, 文件等资源

新建test.css，编写如下： html,body{width:100%;height:100%;} body{background-color: red;} 新建some.html，编辑如下： some.html section box 新建一张test.png的图片

在这里插入图片描述

编辑index.js如下： // 导入一个css文件 import './test.css' // 导入包含 CSS 模块的 CSS 文件 import classNames from './test.css' // 以 URL 的形式引入图片 import imageURL from './test.png' let img = document.createElement('img'); img.src = imageURL; document.body.append(img); // 导入一个html文件 import('./some.html') // 或: import html from './some.html' // 或: require('./some.html') // 写入 box let iframe = document.createElement('div'); iframe.innerHTML = html; document.body.append(iframe); 启动服务，打开浏览器，查看效果如下：在这里插入图片描述

红色的网页背景，parcel图片，some.html section box的模块，说明我们的资源模块已经打包完毕，没有任何问题 3. base64图片资源引入

在某些情况下，我们需要直接读取文件信息，所以就需要使用base64来丰富我们的图片资源引用，那我们该如何操作呢，index.js 编辑如下所示：

// 以字符串的形式读取内容 const string = fs.readFileSync(__dirname + '/test.txt', 'utf8') console.log(string) // 以 Buffer 的形式读取内容 const buffer = fs.readFileSync(__dirname + '/test.png') // 转换Buffer格式到图片 let img = document.createElement('img'); img.src = `data:image/png;base64,${buffer.toString('base64')}`; document.body.append(img);

浏览器效果展示如下：在这里插入图片描述通过上面的预览效果，说明我们文件读取的最终一个预览效果，说明我们buffer文件引入是没问题的 ~

【本文地址】

公司简介

联系我们